<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .banner img{
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="box">
  <div class="banner">
    <img src="./images/1.png" alt="">
  </div>
  <div class="title">
      <p>111111111</p>
  </div>
  <div class="toggle">
    <button class="prev">&lt;</button>
    <button class="next">&gt;</button>
  </div>
</div>
  <script>
    const arr = [
      {
        url:'./images/1.png',title:'111111111'
      },
      {
        url:'./images/2.png',title:'222222222'
      },
      {
        url:'./images/3.bmp',title:'333333333'
      },
      {
        url:'./images/4.jpg',title:'444444444'
      }
    ]
    const img = document.querySelector('.banner img')
    const p = document.querySelector('.title p')
    let i = 0
    // let n = setInterval(function(){
    //   if(i<arr.length){
    //     img.src=arr[i].url
    //     p.innerHTML =arr[i].title
    //     i++
    //   }else{
    //     i = 0
    //   }
    // },1000)
    
    
    const prev = document.querySelector('.prev')
    const next = document.querySelector('.next')
    next.addEventListener('click',function(){
      i++
      i = i >= arr.length ? 0 : i
      img.src = arr[i].url
      p.innerHTML =arr[i].title
      
    })
    prev.addEventListener('click',function(){
      i--
      i = i < 0 ? arr.length-1 : i
      img.src = arr[i].url
      p.innerHTML =arr[i].title
      
    })
    let n = setInterval(function(){
      next.click();
    },1000)

    const box = document.querySelector('.box')
    box.addEventListener('mouseenter',function(){
      clearInterval(n)
    })
    box.addEventListener('mouseleave',function(){
      clearInterval(n)
      n = setInterval(function(){
      next.click();
    },1000)
    })
  </script>
</body>
</html>